import 'package:flutter/material.dart';
import 'home.dart';
import 'register.dart';
import 'forget.dart';

class LoginApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shop 登录页面',
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatelessWidget {
  // 创建文本控制器，用于获取输入框的值
  final TextEditingController usernameController =
      TextEditingController(); // 用户名控制器
  final TextEditingController passwordController =
      TextEditingController(); // 密码控制器

  @override
  Widget build(BuildContext context) {
    // 添加输入监听器，用于调试
    usernameController.addListener(() {
      print('用户名输入: ${usernameController.text}'); // 打印用户名输入变化
    });

    passwordController.addListener(() {
      print('密码输入: ${passwordController.text}'); // 打印密码输入变化
    });

    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      body: Center(
        child: Container(
          // 设置背景图片
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                  'https://pica.zhimg.com/80/v2-fa1ed7948fe0f3feedc69f6076abe789_720w.webp?source=1def8aca'), // 背景图URL
              fit: BoxFit.cover, // 图片填充方式：覆盖整个容器
            ),
          ),
          padding: EdgeInsets.all(20), // 设置四周内边距为20
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 主轴（垂直方向）居中对齐
            crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴（水平方向）居中对齐
            children: [
              // Logo图片容器
              Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0), // 设置20像素的圆角
                  image: DecorationImage(
                    image: NetworkImage(
                        'https://picx.zhimg.com/v2-f536786de4899a7bea47eb9543e65eaa_1440w.jpeg?source=d16d100b'), // Logo图片URL
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SizedBox(height: 20),
              // 用户名输入框容器
              Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.8), // 设置白色半透明背景，透明度为0.8
                  borderRadius: BorderRadius.circular(10), // 设置10像素的圆角
                ),
                child: TextField(
                  controller: usernameController, // 绑定用户名控制器
                  onChanged: (value) {
                    print('用户名实时输入: $value'); // 实时打印用户名输入
                  },
                  decoration: InputDecoration(
                    labelText: '请输入用户名',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              SizedBox(height: 20),
              // 密码输入框容器
              Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.8),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: TextField(
                  controller: passwordController, // 绑定密码控制器
                  decoration: InputDecoration(
                    labelText: '请输入密码',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              SizedBox(height: 10),
              // 底部按钮行
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 忘记密码按钮
                  ElevatedButton(
                    onPressed: () {
                      // 忘记密码逻辑：跳转到忘记密码页面
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => ForgetPage(),
                        ),
                      );
                    },
                    style: ElevatedButton.styleFrom(
                      foregroundColor:
                          Color.fromRGBO(0, 0, 0, 1), // 设置按钮文字颜色为黑色
                      backgroundColor:
                          Color.fromRGBO(255, 255, 255, 0), // 设置按钮背景为透明
                      shadowColor:
                          Color.fromRGBO(255, 255, 255, 0), // 设置阴影颜色为透明
                    ),
                    child: Text('忘记密码'),
                  ),
                  SizedBox(width: 120),
                  // 新用户注册按钮
                  ElevatedButton(
                    onPressed: () {
                      // 注册逻辑：跳转到注册页面
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => RegisterPage(),
                        ),
                      );
                    },
                    style: ElevatedButton.styleFrom(
                      foregroundColor: Color.fromRGBO(0, 0, 0, 1),
                      backgroundColor: Color.fromRGBO(255, 255, 255, 0),
                      shadowColor: Color.fromRGBO(255, 255, 255, 0),
                    ),
                    child: Text('新用户注册'),
                  ),
                ],
              ),
              SizedBox(height: 20),
              // 登录按钮
              ElevatedButton(
                onPressed: () {
                  // 如果有服务器数据可以在这里获取
                  // 这里假设获取到的用户名和密码如下
                  String username = '21251103148'; // 预设的用户名
                  String password = '123456'; // 预设的密码

                  String inputUsername = usernameController.text; // 获取输入的用户名
                  String inputPassword = passwordController.text; // 获取输入的密码

                  // 验证用户名和密码
                  if (inputUsername == username && inputPassword == password) {
                    Navigator.pushReplacement(
                      context,
                      MaterialPageRoute(
                          builder: (context) =>
                              HomeApp()), // 用户输入正确，登录成功跳转到Home页
                    );
                  } else {
                    // 提示用户名或密码输入错误
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('错误'),
                          content: Text('用户名或密码错误'),
                          actions: [
                            TextButton(
                              onPressed: () {
                                Navigator.of(context).pop(); // 关闭对话框
                              },
                              child: Text('确定'),
                            ),
                          ],
                        );
                      },
                    );
                  }
                },
                style: ElevatedButton.styleFrom(
                  foregroundColor: Color.fromRGBO(255, 0, 0, 1), // 设置按钮文字颜色为红色
                ),
                child: Text('登录'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
